import React, { Component } from 'react'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import './App.css'
export default class App extends Component {
  // 把多个组件都要用到的数据,定义在他们共同的父组件中.这个行为叫做状态提升
  state = {
    // 在这里读取本地存储的数据
    // 当用户第一次登录的时候，本地存储中什么也没有，程序会报错，
    // 为了避免程序报错，当本地存储为null的时候，todos为空数组
    todos: JSON.parse(localStorage.getItem('todos')) || [],
    id:undefined,
  }
  // 🐷 添加
  // 形参todoName接受header传来的value值
  addTodo = (todoName) => {
    // 创建一条新对象
    const todo = {
      id: Date.now(),
      todoName,
      isDone: false,
    }
    // 将原来的todos拷贝到一个新的对象中
    const newTodos = [...this.state.todos]
    // 将创建的对象加到数组中
    newTodos.push(todo)
    // 修改私有数据 1.修改数据2.重新渲染页面
    this.setState({
      todos: newTodos
    })
  }
  // 🐷 删除
  removeTodo = (id) => {
    const newTodo = this.state.todos.filter(item => item.id !== id)
    this.setState({
      todos: newTodo
    })
  }
  // 🐷 修改一条私有数据的isDone
  updataTodo = (id) => {
    const newTodo = this.state.todos.map((item) => {
      if (item.id === id) item.isDone = !item.isDone
      return item
    })
    this.setState({
      todos: newTodo
    })
  }
  // 🐷 修改所有私有数据的isDone
  updataTodos = (flag) => {
    const newTodo = this.state.todos.map((item) => {
      item.isDone = flag
      return item
    })
    this.setState({
      todos: newTodo
    })
  }
  // 🐷 清除已完成任务
  claerTodos = () => {
    const newTodo = this.state.todos.filter(item => !item.isDone)
    this.setState({
      todos: newTodo
    })
  }
  // 🐷 修改state里边的id
  EditToggle = (id) =>{
    this.setState({
        // 当item中的按钮显示为取消时，todos中的id和state中的id相等
      id:this.state.id===id ? undefined : id
    })
  }
  // 🐷 修改一条私有数据的todoName
  EditTodo = (id,todoName) => {
    const newTodo = this.state.todos.map((item)=>{
        if(item.id === id) item.todoName = todoName
        return item
    })
    this.setState({
        todos:newTodo,
        id:undefined
    })
  }

  render() {
    const { todos , id } = this.state
    // 上述所有对数据操作的🐷，都使用到了setState,而
    // setState会 1.修改私有数据 2.修改完成数据之后会重新调用render函数
    // 所以在此处添加，可以不用在每个🐷中调用，而且
    // 每次都是最新的数据，在这里将数据存储到本地存储中
    localStorage.setItem('todos',JSON.stringify(todos))
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          {/* 将添加函数传递给header */}
          <Header addTodo={this.addTodo}></Header>
          {/* 当列表中没有任务时，使用三元表达式隐藏list和footer，展示h1 */}
          {todos.length?
            <div>
            {/* 将删除函数和修改函数传递给list */}
            <List todos={todos} id={id} removeTodo={this.removeTodo} updataTodo={this.updataTodo} EditToggle={this.EditToggle} EditTodo={this.EditTodo}></List>
            <Footer todos={todos} updataTodos={this.updataTodos} claerTodos={this.claerTodos} ></Footer>
          </div>:
          <h1>恭喜您，所有任务已经完成！</h1>
          }
        </div>
      </div>
    )
  }
}
